<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>选择班级</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
        }

        .vueApp {
            padding-bottom: 10px;
        }

        .wrapper {
            padding: 15px 15px 0 15px;
        }

        .items {
            padding: 10px 11px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
        }

        .item {
            position: relative;
            height: 50px;
        }

        .item::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgb(212, 212, 212);
            transform: scaleY(0.5);
        }

        .item:last-of-type::after {
            display: none;
        }

        .txt {
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .radio {
            min-width: 15px;
            width: 15px;
            height: 15px;
            background-image: url("../../image/ui/radio_2.png");
            background-size: 15px 15px;
            background-repeat: no-repeat;
            background-position: center;
        }

        .checked {
            background-image: url("../../image/ui/checked_2.png");
        }

        .btn {
            width: 210px;
            height: 46px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 1);
            margin: 45px auto 0 auto;
            line-height: 42px;
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
            border-radius: 22px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="wrapper">
            <div class="items">
                <div v-for="item,index in listData" class="item" data-flex="main:justify cross:center" @click="fnChecked(index)">
                    <div class="txt" data-flex-box="1">{{ item.classesName }}</div>
                    <div :class="checkeds.indexOf(index) !== -1 ? 'radio checked' : 'radio'"></div>
                </div>
            </div>
        </div>
        <div class="btn" data-flex="main:center" @click="fnSubmit">确认</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                checkeds: [],
                listData: ''
            },
            methods: {
                fnChecked: function(index) {
                    if(pageParam.from == 'karaoke' && pageParam.buss != 'share') {
                        this.checkeds = [index];
                    }else {
                       var isChecked = this.checkeds.indexOf(index) !== -1;
                        if(isChecked) {
                            this.checkeds.splice(this.checkeds.indexOf(index), 1);
                        } else {
                            this.checkeds.push(index);
                        } 
                    }
                }
            }
        });
        findClassesList();
    }

    // 获取班级数据
    function findClassesList() {
        var url = 'clsClass/findClassesList';
        var params = {};
        var callback = function (data) {
            vm.$data.listData = data.listData;
        };
        POST(url, params, callback);
    }

    // 获取班级ID集合
    function findClassIds() {
        var arr = [];
        vm.checkeds.forEach(function(item) {
            arr.push(vm.listData[item].id);
        });
        return arr;
    }

    // 提交
    function fnSubmit() {
        var classIds = findClassIds();
        if(classIds.length == 0) {
            fnToast('请先选择班级');
            return;
        }
        // 从卡拉OK页面过来
        if(pageParam.from == 'karaoke') {
            if(pageParam.buss != 'share') {
                // 老师选择班级查看班级分享
                api.execScript({
                    name: pageParam.winName,
                    frameName: pageParam.frameName,
                    script: 'setSelectedClass("'+ classIds.join(',') +'");'
                });
                api.closeWin();
            }else {
                // 老师分享卡拉OK到班级
                var url = 'question/shareDub';
                var params = {
                    'clsClassesId': classIds.join(','),
                    'id': pageParam.businessId
                };
                var callback = function (data) {
                    api.execScript({
                        name: pageParam.winName,
                        frameName: pageParam.frameName,
                        script: 'getClassShareGroup("'+ classIds.join(',') +'");'
                    });
                    shareSuccess();
                };
                POST(url, params, callback);
            }
        }else {
            var url = 'clsClass/shareNotice';
            var params = {
                'classesId': classIds.join(','),
                'businessId': pageParam.businessId,
                'type': pageParam.shareGoods == 1 ? '2' : '3'
            };
            var callback = function (data) {
                shareSuccess();
            };
            POST(url, params, callback);
        }
    }

    function shareSuccess() {
        fnToast('分享成功');
        setTimeout(function() {
            api.closeWin();
        }, 1.2*1000)
    }
</script>

</html>